<template>
    <div class="app-container">
        <!-- 查询和其他操作 -->
        <div class="filter-container">
            <el-input v-model="listQuery.name" clearable class="filter-item" style="width: 200px;"
                placeholder="请输入商品ID" />
            <el-input v-model="listQuery.code" clearable class="filter-item" style="width: 200px;"
                placeholder="请输入商品名称" />
            <el-button v-permission="['GET /admin/brand/list']" class="filter-item" type="primary" icon="el-icon-search"
                @click="handleFilter">查找</el-button>
            <el-button :loading="downloadLoading" class="filter-item" type="primary" icon="el-icon-download"
                @click="handleDownload">导出</el-button>
        </div>

        <!-- 查询结果 -->
        <el-table v-loading="listLoading" size="small" :data="list" element-loading-text="正在查询中。。。" border fit
            highlight-current-row>

            <el-table-column align="center" width="100px" label="订单编号" prop="orderSn" />

            <el-table-column align="center" label="用户ID" prop="userId" />
            <el-table-column align="center" label="订单状态" porp="orderStatus">
                <template slot-scope="scope">
                    <el-tag>{{ scope.row.orderStatus | orderStatusFilter }}</el-tag>
                </template>
            </el-table-column>

            <!-- <el-table-column align="center" property="picUrl" label="类目图片">
                <template slot-scope="scope">
                    <img v-if="scope.row.picUrl" :src="scope.row.picUrl" alt="" width="80">
                </template>
            </el-table-column> -->

            <el-table-column align="center" label="订单金额" prop="orderPrice"></el-table-column>
            <el-table-column align="center" label="支付金额" prop="actualPrice"></el-table-column>
            <el-table-column align="center" label="支付时间" prop="payTime"></el-table-column>
            <el-table-column align="center" label="物流单号" prop="shipSn"></el-table-column>
            <el-table-column align="center" label="物流渠道" prop="shipChannel"></el-table-column>
            <el-table-column align="center" label="操作" width="200" class-name="small-padding fixed-width">
                <template slot-scope="scope">
                    <el-button v-permission="['GET /admin/order/detail']" type="primary" size="mini"
                        @click="handleDetail(scope.row)">详情</el-button>
                    <el-button v-permission="['POST /admin/order/ship']" v-if="scope.row.orderStatus == 201"
                        type="primary" size="mini" @click="handleShip(scope.row)">发货</el-button>
                    <el-button v-permission="['POST /admin/order/refund']" v-if="scope.row.orderStatus == 202"
                        type="primary" size="mini" @click="handleRefund(scope.row)">退款</el-button>
                </template>
            </el-table-column>
        </el-table>

        <pagination v-show="total > 0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit"
            @pagination="getList" />


        <!-- 订单详情对话框 -->
        <el-dialog :visible.sync="orderDialogVisible" title="订单详情" width="800">

            <el-form :data="orderDetail" label-position="left">
                <el-form-item label="订单编号">
                    <span>{{ orderDetail.order.orderSn }}</span>
                </el-form-item>
                <el-form-item label="订单状态">
                    <template slot-scope="scope">
                        <el-tag>{{ scope.order.orderStatus | orderStatusFilter }}</el-tag>
                    </template>
                </el-form-item>
                <el-form-item label="订单用户">
                    <span>{{ orderDetail.user.nickname }}</span>
                </el-form-item>
                <el-form-item label="用户留言">
                    <span>{{ orderDetail.order.message }}</span>
                </el-form-item>
                <el-form-item label="收货信息">
                    <span>（收货人）{{ orderDetail.order.consignee }}</span>
                    <span>（手机号）{{ orderDetail.order.mobile }}</span>
                    <span>（地址）{{ orderDetail.order.address }}</span>
                </el-form-item>
                <el-form-item label="商品信息">
                    <el-table :data="orderDetail.orderGoods" size="small" border fit highlight-current-row>
                        <el-table-column align="center" label="商品名称" prop="goodsName" />
                        <el-table-column align="center" label="商品编号" prop="goodsSn" />
                        <el-table-column align="center" label="货品规格" prop="specifications" />
                        <el-table-column align="center" label="货品价格" prop="price" />
                        <el-table-column align="center" label="货品数量" prop="number" />
                        <el-table-column align="center" label="货品图片" prop="picUrl">
                            <template slot-scope="scope">
                                <img :src="scope.row.picUrl" width="40">
                            </template>
                        </el-table-column>
                    </el-table>
                </el-form-item>
                <el-form-item label="费用信息">
                    <span>
                        (实际费用){{ orderDetail.order.actualPrice }}元 =
                        (商品总价){{ orderDetail.order.goodsPrice }}元 +
                        (快递费用){{ orderDetail.order.freightPrice }}元 -
                        (优惠减免){{ orderDetail.order.couponPrice }}元 -
                        (积分减免){{ orderDetail.order.integralPrice }}元
                    </span>
                </el-form-item>
                <el-form-item label="支付信息">
                    <span>（支付渠道）微信支付</span>
                    <span>（支付时间）{{ orderDetail.order.payTime }}</span>
                </el-form-item>
                <el-form-item label="快递信息">
                    <span>（快递公司）{{ orderDetail.order.shipChannel }}</span>
                    <span>（快递单号）{{ orderDetail.order.shipSn }}</span>
                    <span>（发货时间）{{ orderDetail.order.shipTime }}</span>
                </el-form-item>
                <el-form-item label="收货信息">
                    <span>（确认收货时间）{{ orderDetail.order.confirmTime }}</span>
                </el-form-item>
            </el-form>
        </el-dialog>

    </div>
</template>
<script>
import { listOrder, shipOrder, refundOrder, detailOrder } from '@/api/order'
import Pagination from '@/components/Pagination/index.vue'
import checkPermission from '@/utils/permission'    //权限判断函数
const statusMap = {
    101: '未付款',
    102: '用户取消',
    103: '系统取消',
    201: '已付款',
    202: '申请退款',
    203: '已退款',
    301: '已发货',
    401: '用户收货',
    402: '系统收货'
}
export default {
    name: 'Order',
    components: {
        Pagination
    },
    filters: {
        orderStatusFilter(status) {
            return statusMap[status]
        }
    },
    data() {
        return {
            list: undefined,
            total: 0,
            listLoading: false,
            listQuery: {
                page: 1,
                limit: 20,
                id: undefined,
                name: undefined,
                orderStatusArray: [],
                sort: 'add_time',
                order: 'desc'
            },
            statusMap,
            orderDialogVisible: false,
            orderDetail: {
                order: {},
                user: {},
                orderGoods: []
            },
            shipForm: {
                orderId: undefined,
                shipChannel: undefined,
                shipSn: undefined
            },
            shipDialogVisible: false,
            refundForm: {
                orderId: undefined,
                refundMoney: undefined
            },
            refundDialogVisible: false,
            downloadLoading: false
        }
    },
    methods: {
        checkPermission,
        getList() {
            this.listLoading = true
            listOrder(this.listQuery).then(response => {
                this.list = response.data.data.items
                this.total = response.data.data.total
                this.listLoading = false
            }).catch(() => {
                this.list = []
                this.total = 0
                this.listLoading = false
            })
        },
        handleFilter() {
            this.listQuery.page = 1
            this.getList()
        },
        handleDetail(row) {
            detailOrder(row.id).then(response => {
                this.orderDetail = response.data.data
            })
            this.orderDialogVisible = true
        },
        handleShip(row) {
            this.shipForm.orderId = row.id
            this.shipForm.shipChannel = row.shipChannel
            this.shipForm.shipSn = row.shipSn

            this.shipDialogVisible = true
            this.$nextTick(() => {
                this.$refs['shipForm'].clearValidate()
            })
        },
        confirmShip() {
            this.$refs['shipForm'].validate((valid) => {
                if (valid) {
                    shipOrder(this.shipForm).then(response => {
                        this.shipDialogVisible = false
                        this.$notify.success({
                            title: '成功',
                            message: '确认发货成功'
                        })
                        this.getList()
                    }).catch(response => {
                        this.$notify.error({
                            title: '失败',
                            message: response.data.errmsg
                        })
                    })
                }
            })
        },
        handleRefund(row) {
            this.refundForm.orderId = row.id
            this.refundForm.refundMoney = row.actualPrice

            this.refundDialogVisible = true
            this.$nextTick(() => {
                this.$refs['refundForm'].clearValidate()
            })
        },
        // 确认退款
        confirmRefund() {

        },
        handleDownload() {

        }
    },
    mounted() {
        this.getList()
    },
}
</script>
<style>

</style>